<template>
	<div class="home">
		<!-- 第一种  不建议使用，比较麻烦-->
		我是vuex里的getters =====> {{$store.getters.www}}<br />
		我是vuex里的state里的num ======> {{$store.state.num}}<br />
		<p>我们是映射到计算属性里的vuex里的state ===> {{num}}******{{txt}}******{{arr}}******{{obj}}</p>
		<p>我是本组件计算属性 ===> {{qqq}}</p>
		<p>{{homedata[0]}}</p>
		<input v-model="qqq" />
		<p>{{a}}</p>
	</div>
</template>

<script>
	const HelloWorld = () => import('@/components/HelloWorld.vue')
	import {
		mapState
	} from 'vuex'

	export default {
		name: 'Home',
		components: {
			HelloWorld
		},
		data() {
			return {
				a: 10
			}
		},
		created() {
			this.$store.dispatch("queryData", 66).then(res => {
				console.log("成功")
			}).catch(err => {
				console.log("崩了")
			})
		},

		/*
		本组件不需要计算属性时可这样写↓		
		computed: mapState(["num", "txt", "arr", "obj"])
		*/

		computed: { // computed无法被js修改除非加setter			
			qqq: {
				set(v) {
					this.a = v
				},
				get() {
					return this.a
				}
			},
			...mapState(["num", "txt", "arr", "obj", "homedata"])
		}



	}
</script>
